<template xmlns="http://www.w3.org/1999/html">
  <div class="content">
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>系统</b></el-breadcrumb-item>
        <el-breadcrumb-item>账号管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="main-content">
      <el-form :model="requestContent" ref="ruleForm" :label-position="labelPosition" label-width="130px">
        <el-form-item label="经销商ID" v-show="false" prop="staffId">
          <el-input v-model="requestContent.dealerId" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="经销商名称" prop="agencyName">
          <el-input v-model="requestContent.dealerName" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="经销商简称" prop="agencyName_1">
          <el-input v-model="requestContent.abbreviation" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="法人姓名" prop="corporationName">
          <el-input v-model="requestContent.legalPersonName" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="经销商地址" prop="agencyAddress">
          <el-input v-model="requestContent.address" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="法人身份证号" prop="corporationID">
          <el-input v-model="requestContent.legalPersonIdcard" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="requestContent.phone" placeholder="请输入内容" style="width: 217px"></el-input>
        </el-form-item>
        <el-form-item label="经销商类别" prop="type" placeholder="请选择经销商类别">
          <el-select v-model="requestContent.dealerType">
            <el-option label="集团内" value="0"></el-option>
            <el-option label="集团外" value="1"></el-option>
          </el-select>
        </el-form-item>
        <div v-for="(bank, index) in banks">
          <el-form-item label="请输入银行">
            <el-input v-model="bank.name" placeholder="请输入内容" style="width: 217px"></el-input>
          </el-form-item>
          <el-form-item label="请输入银行简称">
            <el-input v-model="bank.bankAbbreviation" placeholder="请输入内容" style="width: 217px"></el-input>
          </el-form-item>
           <el-form-item label="银行账号">
            <el-input v-model="bank.card" placeholder="请输入内容" style="width: 217px"></el-input>
          </el-form-item>
        </div>
        <br/>
        <el-form-item>
          <el-button type="primary" @click="submitInfo">保存</el-button>
          <el-button type="primary" @click="cancelAdd">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import ElCol from 'element-ui/packages/col/src/col'
  import ElForm from '../../../node_modules/element-ui/packages/form/src/form.vue'
  import ElFormItem from '../../../node_modules/element-ui/packages/form/src/form-item.vue'
  import $ from 'jquery'
  export default {
    components: {
      ElFormItem,
      ElCol,ElForm},
    data () {
      var validateRoleArray=(rule , value , callback)=>{
        if(value===''){
          callback(new error('请输入角色'))
        }else{
          callback()
        }
      };
      return {
        banks:[{name:'',card:'',bankAbbreviation:''}],
        labelPosition:'right',
        isShowBank:false,
        deptOptions:[],
        companyNo:sessionStorage.getItem('companyNo'),
        requestContent:{
          dealerAccountForms:'',
          dealerId:'',
          dealerName:'',
          legalPersonName:'',
          abbreviation:'',
          address:'',
          legalPersonIdcard:'',
          dealerType:'',
          phone:'',
          bankCard:'',
          bankName:''
        },
         /*rules:{
          staffName:[
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          roleArray:[
            {validator:validateRoleArray, trigger: 'change'}
          ],
          bankId:[
            {required: true, message: '请选择银行', trigger: 'change'}
          ]
        },*/
      }
    },
    methods:{
      submitInfo(){
        var form = []
        $.each(this.banks,function(index,value){
          form.push({bankCard:value.card,bankName:value.name,bankAbbreviation:value.bankAbbreviation})
        })
        this.requestContent.dealerAccountForms=form
        if(this.requestContent.dealerId==''){
          this.$http.post('/dealer/newDealer',this.requestContent)
          .then((response)=>{
            if(response.data.success){
              this.$message("添加成功")
            }else{
              this.$message("添加失败")
            }
          })
        }else{
          console.log(this.requestContent.dealerAccountForms)
          this.$http.put('/dealer/newDealer',this.requestContent)
          .then((response)=>{
            if(response.data.success){
              this.$message("修改成功")
            }else{
              this.$message("修改失败")
            }
          })
          .catch(function(error){
            console.log(error)
          })
        }
        
      },

      getDetail(dealerId){
        let that = this
        this.$http.get("/dealer/detail/"+dealerId)
          .then((response)=>{
            this.requestContent=response.data.data
            this.requestContent.dealerType=JSON.stringify(response.data.data.dealerType)
            var bankList = []
            $.each(response.data.data.dealerAccountVOS,function(index,value){
              bankList.push({name:value.bankName,card:value.bankCard,bankAbbreviation:value.bankAbbreviation})
            })
            that.banks = bankList
            console.log(that.banks)
          })
          .catch(function(error){
            console.log(error)
          })
      }
      
    },
    mounted(){
      if(this.$route.query.content!=null){
        this.getDetail(this.$route.query.content)
      }
    }
  }
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;
  background: #F7F7F7;
  .title {
    color: #99A9BF;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0px 10px 0px;
  }
  .main-content {
    background: #fff;
    position: fixed;
    top: 96px;
    bottom: 10px;
    left: 216px;
    right: 16px;
    overflow: auto;
    padding: 20px;
  }
}
</style>